<template>
  <view class="container">
    <div class="page-top">
    </div>
    <div class="gybody">
      <div class="denglu1">
        <ul class="denglu_bd hzly">
          <li class="input">
            <van-field
              :value="userInfo.phone"
              label="手机号"
              placeholder="请输入手机号"
              :border="false"
              maxlength="11"
              @change="doPhoneChange"
              type="digit"
            />
          </li>

          <li class="input">
            <van-cell-group :border="false">
              <van-field placeholder="请输入验证码" :value="userInfo.code" maxlength="20" label="验证码"
                         :border="false" @change="doCodeInput">
                <van-button slot="button" size="small" type="primary" :disabled="verifyBtnStatus"
                            @click="doSendVerifyClick">{{ verifyTxt }}
                </van-button>
              </van-field>
            </van-cell-group>
          </li>
          <li class="msg flexce">
            <text class="msg_input" @click="toVerifyLogin">已有账号，前往登录</text>
          </li>
          <li class="anniu  denglu-anniu">
            <view class="button" @click="toDoRegister">注册</view>
          </li>
        </ul>

      </div>


    </div>
    <van-toast id="van-toast"/>

  </view>
</template>
<script>
import {doRegister, doSendVerify} from "../../../requests/merchant";
import Toast from '../../../../static/vant/toast/toast';

var $this
export default {
  name: "index",
  data() {
    return {
      userInfo: {
        phone: "",
        password: "",
        repassword: "",
        code: "",
        type: "2"
      },
      verifyTxt: "发送验证码",
      verifyBtnStatus: false
    }
  },
  methods: {
    // 校验手机号码和验证码
    doPhoneChange(e) {
      $this.userInfo.phone = e.mp.detail;
    },
    toVerifyLogin() {
      mpvue.navigateTo({
        url: "/pages/merchant/login/main",
      });
    },
    doPasswordInput(e) {
      $this.userInfo.password = e.mp.detail;
    },
    doRePasswordInput(e) {
      $this.userInfo.repassword = e.mp.detail;
    },
    doCodeInput(e) {
      $this.userInfo.code = e.mp.detail;
    },
    toDoRegister() {
      let $reg = /(13\d|14[579]|15[^4\D]|17[^49\D]|18\d|19\d|16\d)\d{8}/;
      let $verify_reg = /\d{6}/

      if (!$reg.test($this.userInfo.phone) || $this.userInfo.phone === '') {
        Toast.fail('请输入正确手机号');
        return false;
      }
      if (!$verify_reg.test($this.userInfo.code) || $this.userInfo.code === '') {
        Toast.fail('请输入正确验证码');
        return false;
      }

      doRegister($this.userInfo).then(res => {
        let resp = res.data
        if (resp.code === 0) {

          Toast.success({
            message: '注册成功',
            onClose() {
              mpvue.redirectTo({
                url: "/pages/merchant/login/main",
              });
            }
          })

        } else {
          Toast.fail(resp.msg);
        }
      })
    },
    doSendVerifyClick() {
      let $data = {"phone": $this.userInfo.phone, "type": 2};
      doSendVerify($data).then(res => {
        let resp = res.data
        if (resp.code === 0) {
          let time = 60
          let intervalId = setInterval(() => {
            if (time > 0) {
              time--;
              this.verifyBtnStatus = true;// 防止再次触发点击事件
              $this.verifyTxt = `${time}S后重新发送`;
            } else {
              $this.verifyTxt = '重新发送验证码';
              this.verifyBtnStatus = false;
              if (intervalId) {
                clearInterval(intervalId);
              }
            }
          }, 1000)
          Toast.success('发送成功')
        } else {
          Toast.fail(resp.msg)
        }
      })
    }
  },
  created() {
    $this = this
  }

}
</script>
<style>
@import "index.css";
</style>
